<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子选择器和后代选择器</title>
		<style>
			/* 子选择器：只会选择.div1的直接子代.s1 */
			.div1>.s1 {
				color: red;
			}
			
			/* 后代选择器，.div1直接子代和间接子代.s1都会被选择到 */
			.div2 .s1 {
				color: green;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<span class="s1">
				我是span1，class为s1<br>
				我是.div1的直接子代
			</span>
			<p>
				<span class="s1">
					我是span2在p标签里面，class为s1<br>
					我是.div1的间接子代（后代）
				</span>
			</p>
		</div>
		
		<div class="div2">
			<span class="s1">
				我是span1，class为s1<br>
				我是.div2的直接子代
			</span>
			<p>
				<span class="s1">
					我是span2在p标签里面，class为s1<br>
					我是.div2的间接子代（后代）
				</span>
			</p>
		</div>
	</body>
</html>